<template>
	<view>
		<view class="MaterialPay">
			 <van-cell title="现在支付" label="价格详情" align="left">
			      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
			      <template #right-icon>
			        <span class="custom-title" style="color: red;font-size: 1rem">￥{{totalPrice}}</span>
			      </template>
			    </van-cell>
			    <van-radio-group v-model="radio">
			      <van-cell-group>
			        <van-cell clickable @click="radio = '1',showOffline = false" align="left">
			          <template #title>
			            <span type="danger">支付宝支付</span>
			          </template>
			          <template #right-icon>
			            <van-radio name="1" />
			          </template>
			        </van-cell>
			        <van-cell clickable @click="radio = '2',showOffline = false" align="left">
			          <template #title>
			            <span type="danger">微信支付</span>
			          </template>
			          <template #right-icon>
			            <van-radio name="2" />
			          </template>
			        </van-cell>
			        <van-cell clickable @click="radio = '3',showOffline = true" align="left">
			          <template #title>
			            <span type="danger">线下支付</span>
			          </template>
			          <template #right-icon>
			            <van-radio name="3" />
			          </template>
			        </van-cell>
			        <div align="left" style="padding: 1rem;font-size: 0.7rem" v-show="showOffline">
			          <p>上传凭证</p>
			          <span style="color: red;">(注:用户支付款项到平台，确认收货后由平台向商户拨付。)</span>
					  <view style="display:inline-block;">
						  <image v-if="filePath!=null" :src="filePath" style="width: 4rem;height: 4rem;float: left;margin: 0.5rem;"></image>
						  <van-uploader style="float: left;" multiple :max-count="1" :deletable ="false" :show-upload="true" :preview-image="true" :after-read="afterRead"/> 
					  </view>
					</div>
			      </van-cell-group>
			    </van-radio-group>
			    <p style="text-align: left;font-size: 0.8rem;padding: 0.5rem;color: black">
			      我同意<span style="color: #8cc5ff">购买守则</span>，
			      <span style="color: #8cc5ff">取消政策</span>和
			      <span style="color: #8cc5ff">退款政策</span>
			      ,我也同意支付以下所示的总金额(含服务费)。</p>
			    <van-submit-bar button-text="立即支付" @submit="onSubmit" />
		</view>
	</view>
</template>

<script>
	import { uploadVoucher } from "../../api/commodity/alipay";
	import { updateOrderVoThree } from "../../api/commodity/order_master.js";
	import { Toast } from "vant";
	import { Dialog } from 'vant';
export default {
	  data(){
		return{
		  radio: '1',
		  showOffline: false,
		  show:false,
		  fileList: [],
		  // 总价
		  totalPrice:Number,
		  // 订单凭证路径
		  filePath:null,
		  // 优惠券ID
		  couponId:null,
		  //提交订单的集合
		  resultList:[],
		  //订单商品
		  list:{},

		}
	  },
	  //页面渲染前加载
	  created() {
		let list = JSON.parse(sessionStorage.getItem('list'));
		this.list = list;
		this.totalPrice = list.labelPrice*list.productCnt;
	  },
	  //方法
	  methods:{
		// 上传线下支付订单凭证
		afterRead(res) {
		  let formData = new FormData();
		  formData.append("voucherFile", res.file);
		  // 此时可以自行将文件上传至服务器
		  uploadVoucher(formData).then((res) =>{
			console.log(JSON.stringify(res))
			this.filePath = "http://localhost"+res.data.data;
		  })
		},
		//立即支付
		onSubmit(){
		  if(this.radio == '1'){
			Toast({
			  message: "暂不支持",
			  position: "top",
			});
		  }else if(this.radio == '2'){
			Toast({
			  message: "暂不支持",
			  position: "top",
			});
		  }else if(this.radio == '3'){
			if(this.filePath!=null && this.filePath!=''){
			   updateOrderVoThree(this.list).then((res)=>{
				   console.log(JSON.stringify(res));
				   if(res.data.code==200){
					   Toast({
							message: "支付成功",
							position: "top",
					   });
					   uni.redirectTo({
					   	url:'/pages/mine_allorders/mine_allorders'
					   });
				   }else{
					   Toast({
							message: "支付失败",
							position: "top",
					   });
					   uni.redirectTo({
					   	url:'/pages/mine_allorders/mine_allorders'
					   });
				   }
			   })
			}else {
			  Toast({
				message: "请上传支付凭证",
				position: "top",
			  });
			}
			
		  }
		},

	  },

	}
</script>

<style>
	.demo-nav{
	  position: relative;
	  display: flex;
	  -webkit-box-align: center;
	  align-items: center;
	  -webkit-box-pack: center;
	  justify-content: center;
	  height: 45px;
	  background-color: #fff;
	  font-size: 1.1rem;
	}
	.demo-nav__back{
	  position: absolute;
	  top: 12px;
	  left: 16px;
	  width: 24px;
	  height: 24px;
	  cursor: pointer;
	}
</style>
